<template>
  <NewDictionaryForm ref="newDictionary" @DMFormClick="DMFormClick"/>
  <ChangeDictionaryForm ref="changeDictionary" @ChangeDictionaryFormClick="DMFormClick"/>
  <el-dialog v-model="centerDialogVisible" center title='删除字典' width="30%">
              <span
              >是否确认要删除该字典?</span
              >
    <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="CloseDialog"
                  >确认</el-button
                  >
                </span>
    </template>
  </el-dialog>
  <el-container style="height: 700px">
    <el-main>
      <el-form ref="formRef" :inline="true" :model="form" class="form" label-position="right" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="字典名称:" prop="dictionaryName">
              <el-input v-model="form.dictionaryName" style="width: 180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="字典类型:" prop="dictionaryGroup">
              <el-select v-model="form.dictionaryGroup" placeholder="请选择字典类型" style="width: 180px">
                <el-option v-for="dictGroup in optionDictGroup" :key="dictGroup.value" :label="dictGroup.label"
                           :value="dictGroup.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间:" prop="dictionaryCreateTime">
              <el-date-picker
                  v-model="form.dictionaryCreateTime"
                  format="YYYY/MM/DD"
                  placeholder="请选择日期"
                  style="width: 180px"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin:20px auto 30px auto">
          <el-col :span="16"/>
          <el-col :span="8">
            <el-button plain style="height: 40px;width: 100px;margin-right: 20px" type="info"
                       @click="resetForm(formRef)">重置
            </el-button>
            <el-button plain style="height: 40px;width: 100px;margin-right: 20px" type="primary"
                       @click="submit(formRef)">查询
            </el-button>
            <el-button plain style="height: 40px;width: 100px" type="success  " @click="OpenForm">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData.slice((form.currentPage-1)*form.pagesize , form.currentPage*form.pagesize)" border
                max-height="463" style="width: 100%">
        <el-table-column label="字典ID" prop="id" width="100"/>
        <el-table-column label="字典标签" prop="dictionaryTag" width="240"/>
        <el-table-column label="字典名称" prop="dictionaryName" width="200"/>
        <el-table-column label="字典简介" prop="dictionaryInfo" width="240"/>
        <el-table-column label="字典类型" prop="dictionaryType" width="240"/>
        <el-table-column label="创建时间" prop="dictionaryFormattingTime" width="320"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button
                size="small"
                type="danger"
                @click="OpenDialog(scope.row)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          :current-page="form.currentPage"
          :total="tableData.length"
          background
          layout="prev, pager, next"
          style="margin-top: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import NewDictionaryForm from "@/components/home/body/dictionaryMaintain/change/NewDictionaryForm.vue";
import type {FormInstance} from "element-plus";
import {useDictGroupStore} from '@/stores/Person/DictGroup'
import {DeleteDictApi, queryDictApi} from "@/api/Dict";
import ChangeDictionaryForm from "@/components/home/body/dictionaryMaintain/change/ChangeDictionaryForm.vue";


let centerDialogVisible = ref(false)

const DictGroupStore = useDictGroupStore()

interface form {
  id: number,
  dictionaryName: string,
  dictionaryType: string,
  dictionaryCreateTime: string,
  dictionaryGroup: string,
}

const formRef = ref<FormInstance>()


//分页
const handleCurrentChange = (currentPage: number) => {
  form.currentPage = currentPage
}
const handleSizeChange = (size: number) => {
  form.pagesize = size
}

//编辑该条字典----编辑
const handleEdit = (index: number, row: form) => {
  OpenChangeForm(row)
}
//清空查询----重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//子节点(新建字典)刷新字典页
const DMFormClick = () => {
  getDictionary()
}

//确定删除弹窗----确认按钮
const CloseDialog = () => {
  //后端接口,删除
  DeleteDictApi(dictId.value, 1).then(response => {
    getDictionary()
    dictId.value = 0
    centerDialogVisible.value = false
  })
}
//删除该条字典---删除按钮
const OpenDialog = (row: form) => {
  dictId.value = row.id
  centerDialogVisible.value = true
}

const dictId = ref(0)
const newDictionary: any = ref()
const changeDictionary: any = ref()

//打开新建字典页面
const OpenForm = () => {
  newDictionary.value.OpenDrawer()
}
//打开编辑字典页面
const OpenChangeForm = (row: form) => {
  changeDictionary.value.OpenDrawer(row)
}


const form = reactive({
  pagesize: 10,
  currentPage: 1,
  id: '',
  dictionaryName: '',
  dictionaryType: '',
  dictionaryCreateTime: '',
  dictionaryGroup: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const optionDictGroup = DictGroupStore.DictStores

//初始化字典表(置空)
let tableData = ref([])


//初始化字典表
const getDictionary = () => {
  queryDictApi('', '', '').then(response => {
    tableData.value = []
    for (let i = 0; i < response["data"].length; i++) {
      tableData.value.push({
        id: response["data"][i].codeId,
        dictionaryTag: response["data"][i].dictId,
        dictionaryName: response["data"][i].dictName,
        dictionaryInfo: response["data"][i].dictLabel,
        dictionaryType: response["data"][i].dictGroup,
        dictionaryCreateTime: response["data"][i].dictCreateTime,
        dictionaryFormattingTime: response["data"][i].dictCreateTime.substring(0, 10)
      })
    }
  })
}
//初始化
getDictionary()

//查询接口
const submit = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      queryDictApi(form.dictionaryCreateTime, form.dictionaryGroup, form.dictionaryName).then(response => {
        tableData.value = []
        for (let i = 0; i < response["data"].length; i++) {
          tableData.value.push({
            id: response["data"][i].codeId,
            dictionaryTag: response["data"][i].dictId,
            dictionaryName: response["data"][i].dictName,
            dictionaryInfo: response["data"][i].dictLabel,
            dictionaryType: response["data"][i].dictGroup,
            dictionaryCreateTime: response["data"][i].dictCreateTime,
            dictionaryFormattingTime: response["data"][i].dictCreateTime.substring(0, 10)
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style scoped>
.form {
  margin-top: 2px;
}

.el-row {
  height: 40px;
  margin-bottom: 0;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>